<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#myCanvas{
	background-color:#CCC;
	border:solid thin  #666;
}
</style>
</head>

<body>
<canvas id="myCanvas" width="640" height="480"></canvas>
</body>
</html>

<script language="javascript">
	window.onload = function()
	{	
		var screenWidth = 640;
		var screenHeight = 480;		
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");	
		var m = {};
				
		var bb = {
			x:Math.random()* 100,
			y:Math.random()* 100,
			die:false
		};
			
		
		for ( i = 0; i < 10; i++)
		{
			m[i] = {
					x:Math.random()* ( screenWidth - 40) + 20,
					y:Math.random()* ( screenHeight - 40) + 20,
					die:false,
					spx: Math.random()* 5,
					spy: Math.random()* 5
				};
		}
		
		setInterval(mainLoop, 5);
		
		function mainLoop()
		{	
			// Clear Screen			
			context.clearRect(0, 0, screenWidth, screenHeight);									

//			context.font = "40pt Arial";
			context.fillText( "Example: HTML5 box", 20 , 20 );			
			
			for ( i = 0; i < m.length; i++)
			{		
				context.beginPath();
				context.rect(m[i].x, m[i].y, 20, 20);
				m[i].x = m[i].x + m[i].spx;
				m[i].y = m[i].y + m[i].spy;	
				
				if ( m[i].x > (screenWidth - 20) || m[i].x < 20 )
				{
					m[i].spx = m[i].spx * (-1);
				}
				
				if ( m[i].y > ( screenHeight - 20 ) || m[i].y < 20 )
				{
					m[i].spy = m[i].spy * (-1);
				}
				
				context.closePath();			
				context.stroke();
			}
			
		}		
		
		function box()
		{
			context.beginPath();
			
			for ( i = 0; i < 10; i++ )
			{
				context.rect( m[i].x, m[i].y, 20, 20 );
			}
			context.closePath();			
			
		}	
		
		var card = new Class({
			Extends		:	ImpelClass,
			peer_class	:	"CardPeer",
			toString	:	function(){
								return ( this.getName() + " of " + this.getSuit());
							}
		});	
		
	}
	
	
</script>
